<template>
    <div class="menu_tree">
        <div class="btn_container">
            <el-button class="btn-class" type="primary" @click="addNewOne" size="small">增加</el-button>
            <el-button class="btn-class" type="warning" @click="editNewOne" size="small">修改</el-button>
            <el-button class="btn-class" type="danger" @click="deleteNewOne" size="small">删除</el-button>
        </div>
        <!-- <el-scrollbar> -->
        <el-tree default-expand-all highlight-current :expand-on-click-node="false" :data="treeList"
            :props="defaultProps" @node-click="handleNodeClick" node-key="menu_id" ref="tree"></el-tree>
        <!-- </el-scrollbar> -->
        <!-- 新增弹窗 -->
        <el-dialog title="添加新的部门" :visible.sync="addshow" :close-on-click-modal="false" @close="dialogClose('addForm')">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="150px">
                <el-form-item label="部门名称" prop="unit_name">
                    <el-input maxlength="20" v-model="addForm.unit_name" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" prop="parent_unit_id">
                    <el-input maxlength="20" v-model="addForm.parent_unit_name" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item label="部门类型"
                      prop="unit_type">
          <el-select v-model="addForm.unit_type"
                     placeholder="请选择部门类型"
                     style="width: 100%;">
            <el-option v-for="item in codelist"
                       :key="item.code_value"
                       :label="item.code_name"
                       :value="item.code_value"></el-option>
          </el-select>
                </el-form-item>-->

                <el-form-item label="部门描述" prop="unit_desc">
                    <el-input maxlength="200" type="textarea" v-model="addForm.unit_desc" placeholder="请输入菜单描述"
                        resize="none"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addshow = false" size="small">取 消</el-button>
                <el-button class="btn-class" type="primary" @click="addcommit" size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!-- ------------------------------------------------- -->
        <!-- 修改弹窗 -->
        <el-dialog title="部门修改" :visible.sync="editshow" :close-on-click-modal="false" @close="dialogClose('editForm')">
            <el-form :model="editForm" :rules="addRules" ref="editForm" label-width="150px">
                <el-form-item label="部门名称" prop="unit_name">
                    <el-input maxlength="20" v-model="editForm.unit_name" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="上级部门" prop="parent_unit_id">
                    <el-input maxlength="20" v-model="editForm.parent_unit_name" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item label="部门类型"
                      prop="unit_type">
          <el-select v-model="editForm.unit_type"
                     placeholder="请选择部门类型"
                     style="width: 100%;">
            <el-option v-for="item in codelist"
                       :key="item.code_value"
                       :label="item.code_name"
                       :value="item.code_value"></el-option>
          </el-select>
                </el-form-item>-->

                <el-form-item label="部门描述" prop="unit_desc">
                    <el-input maxlength="200" type="textarea" v-model="editForm.unit_desc" placeholder="请输入菜单描述"
                        resize="none"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editshow = false" size="small">取 消</el-button>
                <el-button class="btn-class" type="primary" @click="editcommit" size="small">确 定</el-button>
            </div>
        </el-dialog>
        <!-- ------------------------------------------------- -->
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
import Bus from "./bus.js";
export default {
    data() {
        return {
            flag: true,
            treeList: [],
            treeData: "",

            addshow: false,
            addForm: {
                parent_unit_id: "",
                parent_unit_name: "",
                unit_desc: "",
                // unit_type: '',
                unit_id: "",
                unit_name: ""
            },
            addRules: {
                unit_name: [
                    {
                        required: true,
                        message: "请填写机构名称",
                        trigger: "blur"
                    }
                ],
                parent_unit_id: [
                    {
                        required: true,
                        message: "请选择上级部门",
                        trigger: "blur"
                    }
                ]
                // unit_type: [
                //     { required: true, message: '请选择部门类型', trigger: 'change' }
                // ],
                // unit_desc: [
                //     {
                //         required: true,
                //         message: "请填写部门描述",
                //         trigger: "blur"
                //     }
                // ]
            },

            editshow: false,
            editForm: {
                parent_unit_id: "",
                parent_unit_name: "",
                unit_desc: "",
                // unit_type: '',
                unit_id: "",
                unit_name: ""
            },
            defaultProps: {
                children: "listTreeInfo",
                label: "label"
            },
            codelist: [],

            delete_unit_id: ""
        };
    },
    methods: {
        //获取机构tree
        getUnitData() {
            api.getUnitData({}).then(res => {
                this.treeList = res.bus_json;
            });
        },
        // codelist接口获取部门类型下拉
        getCodelistByKind() {
            api.getCodelistByKind({
                code_kind: "unit_type"
            }).then(res => {
                if (res) {
                    this.codelist = res.bus_json[0].codelists;
                }
            });
        },
        // tree新增按钮点击事件
        addNewOne() {
            if (this.addForm.parent_unit_id) {
                this.addForm.unit_desc = "";
                this.addForm.unit_type = "";
                this.addForm.unit_id = "";
                this.addForm.unit_name = "";
                this.addshow = true;
            } else {
                this.$message({
                    message: "请选择上级部门",
                    type: "warning"
                });
            }
        },
        // tree新增机构提交
        addcommit() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        api.saveUnit({
                            parent_unit_id: this.addForm.parent_unit_id,
                            unit_desc: this.addForm.unit_desc,
                            unit_id: "",
                            unit_name: this.addForm.unit_name
                        }).then(res => {
                            if (res) {
                                this.addshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getUnitData();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        // tree修改按钮点击事件
        editNewOne() {
            if (this.editForm.unit_id !== "root") {
                if (this.editForm.unit_id) {
                    this.editForm.parent_unit_name = "";
                    this.editForm.parent_unit_id = "";
                    this.editForm.unit_desc = "";
                    this.editForm.unit_name = "";
                    api.getUnitInfo({
                        unit_id: this.editForm.unit_id
                    }).then(res => {
                        if (res) {
                            this.editForm = {
                                parent_unit_name: res.bus_json.parent_unit_name,
                                parent_unit_id: res.bus_json.parent_unit_id,
                                unit_desc: res.bus_json.unit_desc,
                                unit_name: res.bus_json.unit_name,
                                unit_id: res.bus_json.unit_id
                            };
                            this.editshow = true;
                        }
                    });
                } else {
                    this.$message({
                        message: "请选择上级部门",
                        type: "warning"
                    });
                }
            } else {
                this.$message({
                    message: "禁止修改根目录",
                    type: "warning"
                });
            }
        },
        // tree修改弹窗提交
        editcommit() {
            this.$refs["editForm"].validate(valid => {
                if (valid) {
                    if (this.flag) {
                        api.saveUnit({
                            parent_unit_id: this.editForm.parent_unit_id,
                            unit_desc: this.editForm.unit_desc,
                            unit_id: this.editForm.unit_id,
                            unit_name: this.editForm.unit_name
                        }).then(res => {
                            if (res) {
                                this.editshow = false;
                                this.$message({
                                    message: res.error_msg,
                                    type: "success"
                                });
                                this.getUnitData();
                                setTimeout(() => {
                                    this.flag = true;
                                }, 1500);
                            }
                        });
                    }
                }
            });
        },
        //tree删除按钮点击
        deleteNewOne() {
            if (this.delete_unit_id) {
                this.$confirm("确认删除该数据？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        api.deleteUnit({
                            unit_id: this.delete_unit_id
                        }).then(res => {
                            if (res) {
                                this.$message({
                                    type: "success",
                                    message: res.error_msg
                                });
                                this.getUnitData();
                                this.delete_unit_id = "";
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "未删除"
                        });
                    });
            } else {
                this.$message({
                    message: "请选择机构后再操作",
                    type: "warning"
                });
            }
        },
        // tree节点点击事件
        handleNodeClick(sth) {
            this.addForm.parent_unit_id = sth.id;
            this.addForm.parent_unit_name = sth.label;
            this.addForm.unit_id = sth.id;
            this.editForm.unit_id = sth.id;
            this.delete_unit_id = sth.id;
            Bus.$emit("unit_id", sth.id, sth.label);
        },
        // 所有关闭dialog的清除验证的回调
        dialogClose(formName) {
            this.$nextTick(() => {
                this.$refs[formName].resetFields();
            });
        }
    },
    created() {
        this.getUnitData();
        this.getCodelistByKind();
    }
};
</script>
<style lang='scss'>
.menu_tree {
    .btn_container {
        display: flex;
        justify-content: space-between;
        margin: 20px 10px;
        text-align: left;
    }
}
</style>


